<template>
  <view v-if="listData.length > 0">
    <view class="grid-body mt-30" v-for="(item, index) in listData" :key="index">
      <view class="check grid-common">
        <view class="title flex">
          <text>{{ index + 1 > 9 ? index + 1 : '0' + Number(index + 1) }}</text>
          <text class="tsk-name">{{ item.overhaulCategoryLabel }}</text>
        </view>
        <view class="flex text"
          >检修内容：
          <text>{{ item.content }}</text>
        </view>
        <view class="flex text"
          >检修周期标准：
          <text>{{ item.periodStandard }}</text>
        </view>
        <view class="flex text"
          >添加人：
          <text>{{ item.createByLabel }}</text>
        </view>
        <view class="flex text"
          >更新日期：
          <text>{{ item.updateTime }}</text>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <empty></empty>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { getPointInspectStandard } from '../../../../api/equipment/inspect'
export default {
  name: 'pointCheck',
  components: {
    Empty
  },
  data() {
    return {
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      deviceId: ''
    }
  },
  onLoad(options) {
    this.deviceId = options.id
    //this.initData();
  },
  onPullDownRefresh() {
    this.initData()
  },
  onShow() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    initData() {
      this.listData = []
      this.pageNum = 1
      this.total = null
      this.getList()
    },
    getList() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      if (!this.total || this.total > this.listData.length) {
        getPointInspectStandard(this.deviceId)
          .then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-wrap {
  display: flex;
  background-color: #fff;

  view {
    position: relative;
    width: 35%;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: right;
    margin-bottom: 32rpx;
  }

  .active {
    color: #333;

    &::after {
      content: '';
      position: absolute;
      right: 24rpx;
      bottom: -12rpx;
      height: 6rpx;
      width: 30rpx;
      background-color: #454a5e;
    }
  }
}

.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;

    .tsk-name {
      text-indent: 30rpx;
    }

    .tsk-time {
      position: absolute;
      right: 15px;
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      color: #333;
      display: inline-block;

      &.text-grey {
        color: #999;
      }

      &.w-50 {
        width: 50%;
      }
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
